<link href="slide/styles/jflow.style.css" type="text/css" rel="stylesheet"/>

<script src="slide/scripts/jflow.plus.js" type="text/javascript"></script>

<script type="text/javascript">

	$(document).ready(function(){

	    $("#myController").jFlow({

			controller: ".jFlowControl", // must be class, use . sign

			slideWrapper : "#jFlowSlider", // must be id, use # sign

			slides: "#mySlides",  // the div where all your sliding divs are nested in

			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			
			effect: "flow", //this is the slide effect (rewind or flow)

			width: "850px",  // this is the width for the content-slider

			height: "300px",  // this is the height for the content-slider

			duration: 400,  // time in milliseconds to transition one slide
			
			pause: 5000, //time between transitions

			prev: ".jFlowPrev", // must be class, use . sign

			next: ".jFlowNext", // must be class, use . sign

			auto: true	

    });

});
</script>


<div id="sliderContainer">
	<div id="mySlides">
	<?php 
		$sqlbaiviet = "select * from baiviet order by NgayDang DESC limit 4";
		$dsbaiviet = mysql_query($sqlbaiviet);
		while ($dong = mysql_fetch_array($dsbaiviet))
		{		
			$HinhAnhPath = substr($dong["HinhAnh"], 3);
			echo "<div id='slide1' class='slide'>";
				echo "<img src='{$HinhAnhPath}' alt='Slide 1 jFlow Plus' />";
				echo "<div class='slideContent'>";
					echo "<h3><a href='news.php?do=baivietchitiet&mbv={$dong["MaBaiViet"]}'>{$dong['TieuDe']}</a></h3>";
					echo "<p>{$dong["TomTat"]}</p>";
				echo "</div>";
			echo "</div>";
		}		
	?>
	</div>
	<div id="myController"> 
        <span class="jFlowControl"></span> 
        <span class="jFlowControl"></span> 
        <span class="jFlowControl"></span> 
        <span class="jFlowControl"></span> 
    </div>
    <div class="jFlowPrev"></div>
    <div class="jFlowNext"></div>
</div>